<template>
  <view class="fill-in-data" v-show="load">
  <!-- <view class="myData"> -->
  	<view class="myDataItem">
  		<view class="item">
  			<view class="lefe">
  				头像
  			</view>
  			<view class="pmi-img">
          <image v-if="sex == '女'" :src="headimg == ''?'../../../static/xs_icon/default_girl.png':headimg" mode="" @click="onUpImg()"></image>
  			  <image v-else="sex == '男'" :src="headimg == ''?'../../../static/xs_icon/default_boy.png':headimg" mode="" @click="onUpImg()"></image>
  			  <image src="../../../static/xs_icon/right(1).png" mode="" class="pml-r"></image>
  			</view>
  		</view>
  		<view class="item">
  			<view class="left">
  				姓名
  			</view>
  			<view class="right">
          <input maxlength="9" type="text" v-model="name" value="" placeholder="请输入姓名" />
  				<image src="../../../static/xs_icon/right(1).png" mode=""></image>
  			</view>
  		</view>
  		<view class="item">
  			<view class="left">
  				性别
  			</view>
        <view class="right" @click="changSex()">
        	<text>{{sex}}</text>
        	<image src="../../../static/xs_icon/right(1).png" mode=""></image>
        </view>
  		</view>
      <view class="item">
      	<view class="left">
      		所在地区
      	</view>
        <view class="right">
          <wPicker class="wPicker" :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion"><text>{{region}}</text></wPicker>

        	<image src="../../../static/xs_icon/right(1).png" mode=""></image>
        </view>
      </view>
  	</view>
    <view class="pd-buttom" @click="onStorage()">
       <view class="pdb-con">
         保存
       </view>
    </view>
    <!-- 弹出层 -->
    <fu-popup v-model="showPopup" mode="bottom" border-radius="20" >
      <view class="fu-flex-center fu-flex-vcenter fu-xs-pop">
        <view class="fux-block fux-public" @click="onBlock()">
          男
        </view>
        <view class="fux-delete fux-public"  @click="onDelete()">
          女
        </view>
        <view class="fux-cancel fux-public"  @click="onCancel()">
          取消
        </view>
      </view>
    </fu-popup>
  </view>
</template>

<script>
  import wPicker from "../../../components/xs-components/pick-regions/pick-regions.vue";
  import { API_BASE_URL } from '@/common/config.js'
  export default {
    components:{
      wPicker
    },
    data() {
      return {
        load:true,
        showPopup:false,
        headimg:'',
        name:'',
        sex:'选择性别',
        region:'选择所在城市',
        // defaultRegion:['北京市','市辖区'],
        defaultRegionCode:'110101'
      }
    },
    onLoad() {
      // console.log(this.letterList)
    },
    created(){
      // console.log(this.letterList.length)
    },
    methods: {
      // 上传头像
      onUpImg(){
        console.log("上传头像");
        uni.chooseImage({
          count:1,
          success: (chooseImageRes) => {
            const tempFilePaths = chooseImageRes.tempFilePaths;
            uni.uploadFile({
              url: `${API_BASE_URL}v1/5d5fa8984f0c2`, //仅为示例，非真实的接口地址
              filePath: tempFilePaths[0],
              name: 'file',
              success: (uploadFileRes) => {
                // console.log(JSON.parse(uploadFileRes.data).data[0].path);
                this.headimg = JSON.parse(uploadFileRes.data).data[0].path;
              }
            });
          }
        });
      },
      // 保存
      onStorage(){
        console.log("保存");
        // console.log(global.userInfo)

        const { headimg, name, sex, region, defaultRegionCode } = this;
        // console.log(uni.getStorageSync('USER_INFO'));
        const { id } = uni.getStorageSync('USER_INFO');
        const sexid = sex == '男'?'1':'0';
        console.log(headimg)
        // if(name == '' || sex== '选择性别' || region == '选择所在城市') return this.$popup.showToast('请填写完整信息',2000);
        this.$api.post(global.apiUrls.my.changeData,{
          sex: sexid,
          address: region,
          user_nickname: name,
          address_id: defaultRegionCode,
          user_id: id,
          head_img:headimg
        })
        .then(res => {
          console.log(res)
          this._onStorage(res);
        })
        .catch(err => {
            this.$popup.showToast('保存失败')
        })

      },
      // 保存成功 回调
      _onStorage(res){
        this.$popup.showToast(res.data.msg)
        if(res.data.code == 1){
          global.token = res.data.data.userinfo.user_token;
          global.userInfo = res.data.data.userinfo;
          uni.setStorageSync('USER_TOKEN', global.token)
          uni.setStorageSync('USER_INFO', global.userInfo)
          this.$store.commit('changeName',global.userInfo)
          setTimeout(() => {
            uni.switchTab({
              url:"../../news/news/news"
            })
          },2000)
        }
      },
      // 修改姓名
      // clickName(){
      //   uni.navigateTo({
      //     url:'../../my/change-name/change-name?type=1'
      //   })
      // },
      // 性别
      changSex(){
        this.showPopup = true;
      },
      // 男
      onBlock(){
        this.sex = '男';
        this.showPopup = false;
      },
      // 女
      onDelete(){
        this.sex = '女';
        this.showPopup = false;
      },
      // 取消
      onCancel(){
        this.showPopup = false;
      },
      // 获取城市
      handleGetRegion(e){
        console.log(e)
        this.region = `${e[0].name} - ${e[1].name}`
        this.defaultRegionCode = `${e[1].code}`
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "./fill-in-data.less";
</style>
